<template>
<div class="login">
		<div id="toubu">
			<div id="toubuinfo">
				<a href="tianmao.html"><img src="../assets/img/ys/denglutoubu.png"/></a>				
			</div>				
		</div>
		<div id="content">
			<div id="contentin">
				<img src="../assets/img/ys/beij.jpg">
				<div class="erweima2 clearfix" :class="{active:show==2}">
						<div class="mimadenglu">
								<i class="iconfont icon-yduidunpaishixin"></i>
								密码登录在这里
						</div>				
					<div class="mima" @click="mima">
						<i class="iconfont icon-diannao diannao"></i>
					</div>
						<div class="shaoma">手机扫码，安全登录</div>
						<div class="erweimainfo">
							<img src="../assets/img/ys/dengluerweima.png"/>
						</div>						
						<div class="wenzi">
							<i class="iconfont icon-saoyisao saoyisao"></i>
							<span>打开</span>							
							<span><a>手机天猫</a></span>
							<span><a>手机淘宝</a></span>	
							<span>扫一扫登录</span>						
						</div>	
						<div class="denglu">
							<a>密码登录</a>
							<a href="http://127.0.0.1:8080/tianmao#/zhuce">免费注册</a>
						</div>
				</div>
				<div class="erweima clearfix" :class="{active:show==1}">
						<div class="mimadenglu">
								<i class="iconfont icon-yduidunpaishixin"></i>
								扫码登录更安全
						</div>				
					<div class="mima" id="jh"  @click="shaoma">
						<img src="../assets/img/ys/gen.svg" class="img"/>
					</div>
						<div class="shaoma">密码登录</div>
						<form action="/login2" method="post">
							<input type="text" class="user uname" placeholder="会员名/邮箱/手机号" required autocomplete="off">
								<div class="wrap ur"><i class="iconfont icon-user"></i></div>
							<input type="password" class="pword pwd" autocomplete="off">
								<div class="wrap pw"><i class="iconfont icon-suo1"></i></div>
							<button type="button" id="bnt" @click="denglu">登录</button>
						</form>						
						<div class="denglu">
							<a>忘记密码</a>
							<a>忘记会员名</a>
							<a href="http://127.0.0.1:8080/tianmao#/zhuce">免费注册</a>
						</div>
				</div>
			</div>			
		</div>	
		<div id="foot">
			<div id="footinfo" class="clearfix">
				<ul class="lianjie clearfix">
					<li><a href="">关于天猫</a></li>
					<li><a href="">帮助中心</a></li>
					<li><a href="">开放平台</a></li>
					<li><a href="">诚聘英才</a></li>
					<li><a href="">联系我们</a></li>
					<li><a href="">网站合作</a></li>
					<li><a href="">法律声明</a></li>
					<li><a href="">隐私权政策</a></li>
					<li><a href="">知识产权</a></li>
					<li><a href="">廉政举报</a></li>
				</ul>
				<ul class="lianjie clearfix">
				   <li><a href="">阿里巴巴集团</a></li>
				   <li><a href="">淘宝网</a></li>
				   <li><a href="">天猫</a></li>
				   <li><a href="">聚划算</a></li>
				   <li><a href="">全球速卖通</a></li>
				   <li><a href="">阿里巴巴国际交易市场</a></li>
				   <li><a href="">1688</a></li>
				   <li><a href="">阿里妈妈</a></li>
				   <li><a href="">飞猪</a></li>
				   <li><a href="">阿里云计算</a></li>
				   <li><a href="">AliOS</a></li>
				   <li><a href="">阿里通信</a></li>
				   <li><a href="">万网</a></li>
				   <li><a href="">高德</a></li>
				   <li><a href="">UC</a></li>
				   <li><a href="">友盟</a></li>
				   <li><a href="">虾米</a></li>
				   <li><a href="">钉钉</a></li>
				   <li><a href="">支付宝</a></li>
				</ul>
				<div class="lianjie-foot">
					增值电信业务经营许可证：<a href="">浙B2-20110446</a>
					网络文化经营许可证：<a href="">浙网文[2015]0295-065号</a>
					<a href="">12318举报</a>
					<a href="">出版物网络交易平台服务经营备案证： 新出发浙备字第001号</a>				
					互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com
					互联网药品信息服务资质证书编号：<a>浙-（经营性）-2017-0005</a>
					<a href=""><img src="../assets/img/ys/jc.png">浙公网安备 33010002000120号</a><br>
					（浙）网械平台备字[2018]第00002号<br>
					<span>© 2003-2018 TMALL.COM 版权所有</span>
				</div>
			</div>
		</div> 
</div>
</template>
<script>
export default {
	data(){
        return{
			show:'',
			uname:'',
			pwd:''
        }
    },
    methods:{
        mima(){
            this.show=!this.show;
        },
        shaoma(){
            this.show=!this.show;
		},
		denglu(){
			var uname=document.getElementsByClassName('uname')[0].value
			var pwd=document.getElementsByClassName('pwd')[0].value
			this.uname=uname
			this.pwd=pwd
			if(this.uname==''||this.pwd==''){
				this.$toast({
					message:'请完善登录信息',
					duration:2000
				})
				return false
			}
			axios.post('/api/login',{uname:this.uname,pwd:this.pwd}).then((data)=>{
				if(data.data.num){
					this.$toast({
                        message:"登录成功，欢迎来到天猫",
                        duration:1500
                    })
					this.$router.push('/')
				}else{
					this.$toast({
                        message:"用户名或密码错误",
                        duration:1500
                    })
                    return false
				}
			})
		}
    }
}
</script>

<style scoped>
.active{
	display: none;
}
*{
	box-sizing: border-box;
}
body,ul,li,p,h1,h2,h3,em{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
	font-family: "微软雅黑";
	font-size: 12px;
	color: #666;
}
.w1230{
	width: 1230px;
}
h1,h2,h3{
	font-weight: normal;
}
#toubu{
	width: 1190px;
	height: 88px;
	margin: 0 auto;
	padding: 22px 0;
}
#toubuinfo{
	margin-top: 8px;
	width: 1190px;
	height: 44px;
}
#toubuinfo img{
	width: 190px;
	height: 27px;
}
#content{
	background-color: rgb(90, 0, 253);
	width:100%;
	height: 600px;
}
#contentin{
	position: relative;
	width: 1190px;
	height: 600px;
	margin: 0 auto;
}
.erweima{
	background: #FFFFFF;
	right:60px;
	top:91px;
	width: 350px;
	height:404px;
	position: absolute;
}
.erweima2{
	background: #FFFFFF;
	right:60px;
	top:91px;
	width: 350px;
	height:404px;
	position: absolute;
}
.shaoma{
	margin:40px 0 0 25px;
	width: 298px;
	height: 18px;
	color: #3c3c3c;
	font-size: 16px;
	line-height: 18px;
	font-weight: 700;
}
.erweimainfo{
	width: 140px;
	height: 140px;
	margin: 24px auto;
}
.wenzi{
	text-align:left;
	width:188px;
	height: 36px;
	margin:24px auto;	
	line-height: 16px;	
}
.wenzi span{
	margin-bottom:4px;
	line-height: 16px;
	height: 16px;
	color: #9c9c9c;
	font-size: 12px;
	float: left;
}
.wenzi>span>a{
	cursor: pointer;
	color:#ff0036;
}
.wenzi span:first-child{
	width: 28px;
}
.wenzi span:nth-child(3){
margin: 0 2px 0 5px;	
}
.wenzi span:nth-child(4){
	margin-left: 5px;
	padding-left: 5px;
	border-left: 1px solid #9c9c9c;
}
.iconfont33{
	width:34px;
	height: 36px;
	font-size: 34px;
	float: left;
	color: #ff0036;
	margin-right: 10px;
}
.denglu{
	width: 298px;
	height:18px;
	float: right;
	text-align: right;
	margin: 5px 30px 0 0;
}
.denglu a{
	text-decoration:none;
	width: 48px;
	height: 16px;
	font-size: 12px;
	color:#6c6c6c;
	margin-right: 10px;
	cursor: pointer;
}
.denglu a:hover{
	color: #ff0036;
}
i.saoyisao{
	float: left;
	margin-right: 10px;
	color: #ff0036;
	font-size: 30px;
	line-height: 34px;
}
i.icon-yduidunpaishixin{
	margin:0 10px;
	width: 14px;
	color: #df9c1f;
	font-size: 14px;
	height: 14px;
}
.mimadenglu{
	position: absolute;
	line-height: 28px;
	border: 1px solid #f3d995;	
	color:#df9c1f;
	width: 143px;
	height: 28px;
	font-weight: 400;
	font-size: 12px;
	top:5px;
	right: 63px;
}
.mimadenglu:before{
	top: 5px;
	right: -8px;
	position: absolute;
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	border-left: solid 8px #f3d995;
}
.mima{
	cursor: pointer;
	right:5px;
	top: 10px;
	width: 46px;
	height: 46px;
	position: absolute;
}
.mima img{
	width: 100%;
	height: 100%;
}
i.diannao{
	font-size: 46px;
	line-height: 46px;
	color:#ff0036;
	cursor: pointer;
}
#foot{
	width: 100%;
	height: 177px;	
}
#footinfo{
	text-align: left;
	margin:30px auto 0;
	width: 1190px;
	height:177px ;
}
.lianjie{
	padding: 5px 0;
	line-height: 25px;	
	width: 1190px;
	height: 35px;
}
.lianjie li{
	font-size: 13px;
	margin-right:10px;
	float: left;
	min-width: 28px;
	height: 35px;
	color: #000;
}
.lianjie>li>a{
	font: 12px;
	color: #000;
	text-decoration: none;
}
.lianjie>li>a:hover{
	text-decoration:underline;
}
.lianjie-foot{	
	float: left;
	width:100%;
	height: 85px;
	line-height: 25px;
	color: #666;
	font-size: 13px;
}
.lianjie-foot a{
	height: 20px;
	margin-right:55px ;
	color: #999999;
	font-size: 13px;
	text-decoration: none;
}
.lianjie-foot a:hover{
	text-decoration: underline;
}
.lianjie-foot span{
	color:#999;
}
input,button{
	padding-left: 42px;
	width: 300px;
	height: 40px;
	margin: 20px 25px 0 25px;
}
#bnt{
	padding-left: 0;
	opacity: .9;
}
#bnt:hover{
	opacity: 1;
}
#bnt{
	text-align: center;
	font-family: "微软雅黑";
	font-size: 16px;
	border: none;
	background: #ff0036;
	color: #fff;
	border-radius: 3px;
	cursor: pointer;
	margin-bottom:20px;
}
.wrap{
	z-index: 9;
	text-align: center;
	border: none;
	width: 38px;
	height:38px;
	line-height: 38px;
	background:#ddd;
}
.user{
	position: relative;
}
.pword{
	position: relative;
}
.ur{
	top: 79px;
	left: 26px;
	position: absolute;
}
.pw{
	top: 139px;
	left: 26px;
	position: absolute;
}

i.icon-suo1{
	font-size: 22px;
	color: #606060;
}
i.icon-user{
	font-size: 22px;
	color: #606060;
}
.yc{
	display: none;
}

</style>
